<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="250"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Function to draw an arrow from (fromx, fromy) to (tox, toy)
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 12; // length of head in pixels
            const angle = Math.atan2(toy - fromy, tox - fromx);
            
            ctx.beginPath();
            // Main line
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            // Arrow head
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Set common styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // --- Main Drawing ---

        // 1. Draw the pipe walls
        const pipeTopY = 50;
        const pipeBottomY = 190;
        const pipeLeftX = 10;
        const pipeRightX = 590;

        ctx.beginPath();
        ctx.moveTo(pipeLeftX, pipeTopY);
        ctx.lineTo(pipeRightX, pipeTopY);
        ctx.moveTo(pipeLeftX, pipeBottomY);
        ctx.lineTo(pipeRightX, pipeBottomY);
        ctx.stroke();

        // 2. Draw the dashed metal wire mesh
        const meshX = 300;
        ctx.save();
        ctx.beginPath();
        ctx.setLineDash([6, 4]);
        ctx.moveTo(meshX, pipeTopY);
        ctx.lineTo(meshX, pipeBottomY);
        ctx.stroke();
        ctx.restore();

        // 3. Draw text and arrows
        const arrowY = (pipeTopY + pipeBottomY) / 2;
        ctx.textAlign = 'center';
        
        // --- Left Section ---
        const leftCenterX = 155;
        // Draw state variables T0, p0
        ctx.font = 'italic 28px Times New Roman';
        ctx.textBaseline = 'bottom';
        ctx.fillText('T\u2080, p\u2080', leftCenterX, arrowY - 20);
        // Draw velocity arrow
        drawArrow(ctx, leftCenterX - 50, arrowY, leftCenterX + 50, arrowY);
        // Draw velocity v0
        ctx.textBaseline = 'top';
        ctx.fillText('v\u2080', leftCenterX, arrowY + 20);

        // --- Right Section ---
        const rightCenterX = 445;
        // Draw state variables (T1, p1)
        ctx.font = 'italic 28px Times New Roman';
        ctx.textBaseline = 'bottom';
        ctx.fillText('(T\u2081, p\u2081)', rightCenterX, arrowY - 20);
        // Draw velocity arrow
        drawArrow(ctx, rightCenterX - 50, arrowY, rightCenterX + 50, arrowY);
        // Draw velocity v1
        ctx.textBaseline = 'top';
        ctx.fillText('v\u2081', rightCenterX, arrowY + 20);
        
        // 4. Draw the label for the mesh
        ctx.font = '28px "KaiTi", "SimSun"';
        ctx.fillText('金属丝网', meshX, pipeBottomY + 15);

    </script>
</body>
</html>